<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">

      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="浏览" name="first">
          <div style="min-height: 620px;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="pagination.total"
                :page-size="pagination.pageSize"
                :current-page="pagination.pageNum"

                @current-change="pageChange">
            </el-pagination>
            <div class="grid-box">
              <CoursewareCard v-for="(courseware, index) in coursewareList"
                              :key="index" :courseware="courseware"></CoursewareCard>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="上传" name="second">
          <div>

            <el-row>
              <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="http://localhost:8000/courseware/upload"
                  :headers="{ 'Authorization': token }"
                  :data="{info:intro}"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :on-success="handleSuccess"
                  :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-row>
            <el-row class="row"></el-row>
            <el-row>
              <el-col :span="12">
                <el-input v-model="intro" placeholder="请输入介绍"></el-input>
              </el-col>
            </el-row>
            <el-row class="row"></el-row>
            <el-row>
              <el-button size="small" type="success" @click="submitUpload">上传</el-button>
            </el-row>

          </div>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>

import CoursewareCard from "@/components/CoursewareCard/CoursewareCard.vue";
import {listCourseware} from "@/api/courseware";

export default {
  components: {CoursewareCard},

  data() {
    return {
      intro: '',
      token: localStorage.getItem('Authorization'),
      activeName: 'first',
      fileList: [],
      coursewareList: [],
      pagination: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      },
      type: '',
      name: '',
    }

  },

  mounted() {
    this.fetchData()
  },

  methods: {

    handleSuccess(response, file, fileList) {
      console.log('上传成功', response);
      if(response.code===200){
        this.$message.success('上传成功！')
        this.$refs.upload.clearFiles()
        this.intro=null
      }
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove() {
    },
    handlePreview() {
    },
    handleClick() {
    },
    fetchData() {
      listCourseware(this.pagination.pageNum, this.pagination.pageSize, this.type, this.name).then(res => {
        this.coursewareList = res.data.data
        this.pagination.total = res.data.total
      })
    },
    pageChange(currentPage) {
      this.pagination.pageNum = currentPage
      this.fetchData()
    },
  }
}
</script>

<style scoped>
.grid-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
//min-height: 620px;
}

.row {
  min-height: 30px;
}
</style>
